<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		  content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<title>局部刷新</title>
	<script src="/webjars/jquery/3.5.1/jquery.js"></script>
	<script src="/resources/js/http.js"></script>
	<link rel="stylesheet" href="/resources/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/resources/css/dashboard.css" />
	<script src="/aa.js"></script>
	<style>
		.loading_container{
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			z-index: 99999;
			width: 100%;
			height: 100%;
			zoom: 1.5;
			/*background: rgba(0, 0, 0, 0.3);*/

		}
		.loading{
			width: 80px;
			height: 40px;
			margin: 0 auto;
			zoom: 0.5;
			/*margin-top:100px;*/
		}
		.loading span{
			display: inline-block;
			width: 8px;
			height: 100%;
			border-radius: 4px;
			background: lightgreen;
			-webkit-animation: load 1s ease infinite;
			margin-right: 5px;
		}
		@-webkit-keyframes load{
			0%,100%{
				height: 40px;
				background: lightgreen;
			}
			50%{
				height: 70px;
				margin: -15px 0;
				background: lightblue;
			}
		}
		.loading span:nth-child(2){
			-webkit-animation-delay:0.2s;
		}
		.loading span:nth-child(3){
			-webkit-animation-delay:0.4s;
		}
		.loading span:nth-child(4){
			-webkit-animation-delay:0.6s;
		}
		.loading span:nth-child(5){
			-webkit-animation-delay:0.8s;
		}
	</style>
</head>
<div class="loading_container" style="display: none" id="loading_container">
	<div class="loading">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
<!-- 省  jsp -->
<span id="aazone.zoneJProvince">
<!-- @end of zone [zoneJProvince]@ --></span>
<!-- 市 thymeleaf -->
<span id="aazone.zoneTCity">
<!-- @end of zone [zoneTCity]@ --></span>
<!-- 区 freemarker -->
<span id="aazone.zoneFArea">
<!-- @end of zone [zoneFArea]@ --></span>
<!-- 列表  thymeleaf -->
<span id="aazone.zoneTList">
<!-- @end of zone [zoneTList]@ --></span>
<!-- 详情  freemarker -->
<span id="aazone.zoneFDetail">
<!-- @end of zone [zoneFDetail]@ --></span>

<script type="text/javascript">
	// const ajaxAnywhere2 = new AjaxAnywhere();
	// ajaxAnywhere2.bindById();
	// const ajaxAnywhere3 = new AjaxAnywhere();
	// ajaxAnywhere3.bindById();
	initData();
	async function initData(){
		await ajaxAnywhere.getAJAX('/demo/j/province', 'zoneJProvince');
		const s = document.getElementById("zoneJProvince");
		const v = s.options[s.selectedIndex].value;
		await ajaxAnywhere.getAJAX('/demo/t/city?pid='+v, 'zoneTCity');
		const s1 = document.getElementById("zoneTCity");
		const v1 = s.options[s1.selectedIndex].value;
		await ajaxAnywhere.getAJAX('/demo/f/area?pid='+v1, 'zoneFArea');
		changeProvince();
		changeCity();
		changeArea();
	}

	function changeProvince(){
		$('#zoneJProvince').change(async () => {
			const s = document.getElementById("zoneJProvince");
			const v = s.options[s.selectedIndex].value;
			if(!v){
				return;
			}
			await ajaxAnywhere.getAJAX('/demo/t/city?pid='+v, 'zoneTCity'); // 刷新市
			await ajaxAnywhere.getAJAX('/demo/f/area', 'zoneFArea'); // 清空区
			await ajaxAnywhere.getAJAX('/demo/t/list?id='+v+'&type=1', 'zoneTList'); // 加载列表
			await ajaxAnywhere.getAJAX('/demo/f/detail', 'zoneFDetail'); // 清空详情
			changeCity();
			clickListItem();
		});

	}

	function changeCity(){
		$('#zoneTCity').change(async () => {
			const s = document.getElementById("zoneTCity");
			const v = s.options[s.selectedIndex].value;
			if(!v){
				return;
			}
			await ajaxAnywhere.getAJAX('/demo/f/area?pid='+v, 'zoneFArea'); // 刷新区
			await ajaxAnywhere.getAJAX('/demo/t/list?id='+v+'&type=2', 'zoneTList'); // 加载列表
			await ajaxAnywhere.getAJAX('/demo/f/detail', 'zoneFDetail'); // 清空详情
			changeArea();
			clickListItem();
		});
	}

	function changeArea(){
		$('#zoneFArea').change(async () => {
			const s = document.getElementById("zoneFArea");
			const v = s.options[s.selectedIndex].value;
			if(!v){
				return;
			}
			await ajaxAnywhere.getAJAX('/demo/t/list?id='+v+'&type=3', 'zoneTList'); // 加载列表
			await ajaxAnywhere.getAJAX('/demo/f/detail', 'zoneFDetail'); // 清空详情
			clickListItem();
		});
	}

	function clickListItem(){
		$('.zoneTListItem').click(async (e) => {
			console.log(e.target.attributes.dataid.value)
			const v = e.target.attributes.dataid.value;
			await ajaxAnywhere.getAJAX('/demo/f/detail?id='+v+'&type=1', 'zoneFDetail'); // 加载列表
		});
		clickListItemAdd();
	}

	function clickListItemAdd(){
		$('.zoneTListItemAdd').click(async (e) => {
			window.open('/demo/j/dialog?id=add', 'newwindow', 'height=500, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
		});
	}

	function addSaveDialog(v){
		console.log('v::', v);
		// post提交
		$http.post('/demo/t/saveList',v).then(async res=>{
			await ajaxAnywhere.getAJAX('/demo/t/flushList', 'zoneTList'); // 加载列表
			clickListItem();
		})

		// let s = '';
		// for(const k in v){
		// 	s += '&' + k + '=' + v;
		// }
		// s.replace('&','?');
		// console.log('/demo/t/saveList'+s)
		// ajaxAnywhere.getAJAX('/demo/t/saveList'+s, 'zoneFDetail'); // 清空详情
	}

</script>



</body>
</html>
